<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <script type="text/javascript" src="../dist/vis.js"></script> <!-- network handling framework -->
    <link href="../dist/vis.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        #network{
            width: 1200px;
            height: 800px;
            border: 1px solid lightgray;
        }
    </style>
</head>
<body>
<h1>Network Test</h1>
<div id="network"></div>

<script type="text/javascript">
    // create a network
    var container = document.getElementById('network');
    var nodes = new vis.DataSet([]);
    var edges = new vis.DataSet([]);

    // create a network
    var data = {
        nodes: nodes,
        edges: edges
    };
//    data.nodes.update({id: 0, label: 'node 1'});
    var fontFace = 'roboto,"helvetica neue","segoe ui",arial,helvetica,sans-serif';
    var options = {
        autoResize: true,
        interaction: {
            hover: true
        },
        width: '100%',
        height: '400px',
        nodes: {
            shape: 'dot',
            font: {
                size: 13,
                face: fontFace,
                strokeColor: '#fff',
                strokeWidth: 5
            }
        }
    };
    var network = new vis.Network(container, data, options);

    function info(s) {
        document.getElementById('num').innerText += s + '\n';
    }






</script>
</body>
</html>